<template>
  <div class="moneyConfirm-page">
    <h3>待确认订单</h3>
    <AreaWarp :padding="true">
      <SearchWarp :label="'用户姓名'">
        <el-input v-model.trim="searchInfo.realname" placeholder="请输入用户姓名"></el-input>
      </SearchWarp>
      <SearchWarp :label="'手机号'">
        <el-input v-model.trim="searchInfo.mobile" maxlength="11" placeholder="请输入手机号码"></el-input>
      </SearchWarp>
      <SearchWarp :label="'打款金额'">
        <el-input class="inputWidth" v-model.trim="searchInfo.loanMoneyBegin" placeholder="起始金额"></el-input>-
        <el-input class="inputWidth" v-model.trim="searchInfo.loanMoneyEnd" placeholder="结束金额"></el-input>
      </SearchWarp>
      <SearchWarp :label="'打款时间'">
        <el-date-picker
          v-model="searchInfo.auditTime"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
        ></el-date-picker>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <AreaTitleWarp :title="'放款待确认列表'">
      <el-button v-if="remitShow" type="primary" icon="el-icon-search" @click="makeMoney('1')">打款成功</el-button>
      <el-button v-if="remitShow" type="info" icon="el-icon-delete" @click="makeMoney('0')">打款失败</el-button>
      <el-button type="primary" @click="Refresh">刷新</el-button>
    </AreaTitleWarp>

    <!--搜索结果区域-->
    <AreaWarp :padding="false" v-loading="getLoaningListLoading">
      <el-table
        size="mini"
        :data="tableInfo.list"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="borrowId" label="订单ID"></el-table-column>
        <el-table-column prop="realname" label="姓名"></el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="120"></el-table-column>
        <el-table-column prop="realCapital" label="打款金额"></el-table-column>
        <el-table-column prop="bankName" label="打款渠道-银行名称" min-width="180"></el-table-column>
        <el-table-column prop="cardNo" label="打款渠道-银行卡号" min-width="180"></el-table-column>
        <el-table-column prop="payTime" label="打款成功时间" min-width="180" :formatter="formatter_time"></el-table-column>
        <!--<el-table-column prop="status" label="操作人员" min-width="120"></el-table-column>-->
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next, jumper"
        class="pub-page"
        :current-page="searchInfo.page"
        :page-sizes="[20,50,100]"
        :page-size="searchInfo.size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
      ></el-pagination>
    </AreaWarp>
    <el-dialog
      title="打款操作"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="sure" v-if="!isShow">确认勾选的订单都已
        <span>打款成功？</span>
      </div>
      <div class="sure" v-if="isShow">确认勾选的订单都已
        <span>打款失败？</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" v-if="!isShow" @click="confirmLoan('1')">确认打款成功</el-button>
        <el-button type="primary" v-if="isShow" @click="confirmLoan('0')">确认打款失败</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getTimestamp } from "../../../assets/js/time";
export default {
  data() {
    return {
      searchInfo: {
        realname: "",
        mobile: "",
        loanMoneyBegin: "", //打款金额开始
        loanMoneyEnd: "", //打款金额结束
        auditTime: "", //审核时间
        page: 1,
        size: 20
      },
      getLoaningListLoading: false,
      tableInfo: {
        list: [],
        size: 20,
        page: 1,
        total: 0
      },
      dialogVisible: false,
      listSelection: [],
      isShow: false, //显示打款失败还是打款成功
      remitShow:false
    };
  },
  methods: {
    //改变每页显示多少条
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    //搜素数据
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let reqData = that.filter_parameter(that.searchInfo);
      if (!reqData) {
        return;
      }
      that.getLoaningListLoading = true;
      that.ajaxJson({
        url: "/finance/getLoaningList",
        data: reqData,
        success: function(data) {
          if (data.code == "0") {
            that.borrowId = data.data.borrowId;
            that.tableInfo = data.data;
          }
          that.getLoaningListLoading = false;
        }
      });
    },
    //重置按钮
    reset() {
      let that = this;
      that.searchInfo = {
        realname: "",
        mobile: "",
        loanMoneyBegin: "", //打款金额开始
        loanMoneyEnd: "", //打款金额结束
        auditTime: "", //审核时间
        page: 1,
        size: 20
      };
      that.search();
    },
    //刷新
    Refresh() {
      let that = this;
      that.search();
    },
    //表单选择
    handleSelectionChange(val) {
      let that = this;
      that.listSelection = [];
      that.listSelection = val;
    },
    //打款确认弹框
    makeMoney(row) {
      let that = this;
      if (that.listSelection.length == 0) {
        that.showMsg("请至少选择一条打款记录", "error");
        return;
      }
      if (row == 1) {
        that.isShow = false;
      } else {
        that.isShow = true;
      }
      that.dialogVisible = true;
    },
    //弹框关闭
    handleClose() {
      let that = this;
      that.listSelection = [];
      that.$refs.multipleTable.clearSelection();
      that.dialogVisible = false;
    },
    //确认打款
    confirmLoan(row) {
      let that = this;
      let selectList = [];
      that.listSelection.forEach(function(item, index) {
        selectList.push(item.borrowId);
      });
      that.ajaxJson({
        url: "/finance/confirmLoan",
        data: {
          borrowIds:selectList,
          isPaySuccess: row
        },
        success: function(data) {
          if (data.code == "0") {
            that.showMsg("操作成功", "success");
          } else {
            that.showMsg("操作失败", "error");
          }
          that.listSelection = [];
          that.$refs.multipleTable.clearSelection();
          that.dialogVisible = false;
          that.search();
        }
      });
    },
    //过滤条件
    filter_parameter(obj) {
      let that = this;
      let x = {};
      //姓名
      if (obj.realname) {
        x.realname = obj.realname;
      }
      //手机号
      if (obj.mobile) {
        if (!that.isMobile(obj.mobile)) {
          that.showMsg("请输入正确的手机号", "error");
          return;
        } else {
          x.mobile = obj.mobile;
        }
      }
      //审核时间
      if (obj.auditTime) {
        x.auditTimeBegin = obj.auditTime
          ? getTimestamp(obj.auditTime[0])
          : undefined;
        x.auditTimeEnd = obj.auditTime
          ? getTimestamp(obj.auditTime[1]) + 86399999
          : undefined;
      }
      //打款金额
      if (obj.loanMoneyBegin) {
        if (!/^[0-9]*$/.test(obj.loanMoneyBegin)) {
          that.showMsg("请输入正确的起始金额", "error");
          return;
        } else {
          x.loanMoneyBegin = obj.loanMoneyBegin;
        }
      }
      if (obj.loanMoneyEnd) {
        if (!/^[0-9]*$/.test(obj.loanMoneyEnd)) {
          that.showMsg("请输入正确的结束金额", "error");
          return;
        } else {
          x.loanMoneyEnd = obj.loanMoneyEnd;
        }
      }
      if (obj.loanMoneyBegin && obj.loanMoneyEnd) {
        if (Number(obj.loanMoneyBegin) >= Number(obj.loanMoneyEnd)) {
          that.showMsg("起始金额不得大于结束金额", "error");
          return;
        }
      }
      x.size = obj.size;
      x.page = obj.page;
      return x;
    },
    isRemitShow() {
      let that = this;
      let isRemitShow = that
        .urlPermissions()
        .indexOf("/finance/confirmLoan");
      if (isRemitShow == "-1") {
        that.remitShow = false;
      } else {
        that.remitShow = true;
      }
    }
  },
  created() {
    let that = this;
    Promise.all([that.isRemitShow()]).then(arr => {
      that.search();
    });
  }
};
</script>
<style lang="less">
.moneyConfirm-page {
  .inputWidth {
    width: 120px;
  }
  .sure {
    line-height: 30px;
    span {
      color: red;
    }
  }
}
</style>
